<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline" :form="form">
      <a-row :gutter="24">
        <slot></slot>
        <template v-if="advanced">
          <slot name="advanced"></slot>
        </template>
        <a-col :md="!advanced && 6 || 3" :sm="24" >
          <span class="table-page-search-submitButtons" :style="advanced && { float: 'left', overflow: 'hidden' } || {} ">
            <a-button type="primary" @click="searchHandler">查询</a-button>

            <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
            <a @click="toggleAdvanced" style="margin-left: 8px" v-if="more&&showMore">
              {{ advanced ? '收起' : '更多' }}
              <a-icon :type="advanced ? 'up' : 'down'"/>
            </a>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>

  export default {
    name: 'fSearchForm',
    provide() {
      return {
        queryParam: this.queryParam
      }
    },
    props: {
      formKey: {
        type: String,
        default: ''
      },
      tableId: {
        type: String,
        default: null
      },
      tableObj: {
        type: Object,
        default: null
      },
      more: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        form: this.$form.createForm(this),
        // 高级搜索 展开/关闭
        advanced: false,
        showMore: true,
        queryParam: {}
      }
    },
    methods: {
      searchHandler() {
        let searchParams = Object.assign({}, this.form.getFieldsValue(), this.queryParam)
        if (this.tableObj) {
          this.tableObj.refresh(true, searchParams)
        } else {
          this.$emit('searchHandler', searchParams)
        }
        //this.$bus.emit('reloadTable', this.form.getFieldsValue(), this.tableId)
      },
      resetForm() {
        this.form.resetFields()
        this.$bus.emit('resetSearchParams', {})
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      }
    },
    computed: {},
    created() {
      if (!this.$slots['advanced']) {
        this.showMore = false
      }
      console.log('########', this.$slots['advanced'])
    }
  }
</script>
